<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dexcalibur - Device Manager</title>

    <!-- styles -->
    <!--## pages/inc/tpl_css.html ##-->


    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body class="dxc-dark">

        <!-- Navigation -->
        <!--## pages/inc/menu.html ##-->

        <div id="page-wrapper"  class="dxc-dark">
            <h1 class="page-header">Device manager</h1>
            <div class="dxc-description">
                Show connected device, switch bridges, and select default device to hook. 
                Any device contained into list below can be hook if Frida is configured.
            </div>

            <div class="row justify-content-center"><div class="col-lg-6" id="alertcontainer"></div></div>

            <!-- /.row -->
            <div class="row">
                <div class="col-lg-4">
                    <div class="card">

                        <h5 class="card-header">Bridges</h5>
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <input type="radio" checked="checked" name="bridgeType" value="adb" id="bridgeTypeADB"/>&nbsp;
                                <label for="bridgeTypeADB">ADB</label>
                            </li>
                            <li class="list-group-item">
                                <input type="radio" name="bridgeType" disabled value="sdb" id="bridgeTypeSDB"/>&nbsp;
                                <label for="bridgeTypeSDB">SDB (not configured)</label>
                            </li>
                        </ul>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <div class="col-lg-8">

                    <div class="card">
                        <h5 class="card-header">
                            List of connected devices
                            <span class="bage badge-pill badge-primary refreshDex" id="dm-refresh-btn" style="margin-left:2em; font-size:0.8em; cursor:pointer">
                                <i class="fa fa-refresh"></i>&nbsp;Refresh
                            </span>
                        </h5>
                        <div class="card-body">
                            <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-devices">
                                <thead>
                                    <tr>
                                        <th>Default</th>
                                        <th>Host UID</th>
                                        <th>Device name</th>
                                        <th>Model</th>
                                        <th>Product</th>
                                        <th>Status</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                </tbody>
                            </table>
                            <!-- /.table-responsive -->
                        </div>
                        <!--
                            <div class="card-footer">
                            <button class="btn btn-primary defaultdev">
                                <span class="fa fa-phone"></span>&nbsp;Select as default device
                            </button>

                        </div>-->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->


 

    <!--## pages/inc/tpl_js_end.html ##-->


    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {

        let dmTable = $('#dataTables-devices').DataTable({

            paging:   false,
            ordering: false,
            info:     false,
            searching: false,

            ajax: {
                url:  "/api/device",
                dataSrc: "devices"
            },
            columns: [
                {
                    width: "10px",
                    render: function(data, type, row, meta ){
                        console.log(row);
                        return '<form><input class="devselector" type="radio" value="'+btoa(row.uid)+'" id="deviceSelected-'+btoa(row.uid)+'" name="deviceSelected" '
                        +(row.selected==true? 'checked':'')
                        +'/></form>';
                    }
                },
                { data: 'usbQualifier' },
                { data: 'uid' },
                { data: 'model' },
                { data: 'product' },
                { 
                    render: function(data, type, row, meta ){
                        return (row.enrolled? '<span class="fa fa-check text-success"></span>enrolled': '<span class="fa fa-close text-danger">unauthorized</i>');
                    }
                },{
                    render: function(data, type, row, meta ){
                        return (row.enrolled==false? '<u class="fa fa-refresh">enroll</u>': '');
                    }
                }
            ],
            responsive: true
        });

        $(document).on("click",".devselector",function(el){
            DexcaliburAPI.device.selectAsDefaultDevice(
                atob(el.target.value),
                function(data){
                    if(data.errcode==null){
                        DexcaliburAPI.ui.alert.success(data.msg, false);
                        dmTable.ajax.reload();
                    }
                    else
                        DexcaliburAPI.ui.alert.error(data.error);
                },
                function(data){
                    DexcaliburAPI.ui.alert.error(data.error);
                    // $("#saveNotify").html("<span style='color:red'>(#1) Error :-(</span>");
                }
            );
        });

        $('#dm-refresh-btn').click(()=>{
            dmTable.ajax.reload();
        });
    });
    </script>

</body>

</html>
